import React from "react";
import "./index.css";
import { Form, Button, Input, message } from "antd";
import { getMenu } from "../../api";
import { useNavigate, Navigate } from "react-router-dom";

const Login = () => {
  const navigate = useNavigate();
  if (localStorage.getItem("token")) {
    return <Navigate to="/home" replace />;
  }
  const handleLogin = (values) => {
    getMenu(values).then(({ data }) => {
      if (data.code !== 20000) return message.error("用户名或密码错误");
      localStorage.setItem("token", data.data.token);
      navigate("/home");
    });
  };
  return (
    <Form
      onFinish={handleLogin}
      className="login-container"
      labelCol={{ span: 6 }}
      wrapperCol={{ span: 18 }}
    >
      <h2 className="login_title">后台管理系统</h2>
      <Form.Item label="用户名" name="username" rules={[{ required: true }]}>
        <Input placeholder="用户名" />
      </Form.Item>
      <Form.Item label="密码" name="password" rules={[{ required: true }]}>
        <Input.Password placeholder="密码" />
      </Form.Item>
      <Form.Item className="login-button" wrapperCol={{ span: 24 }}>
        <Button type="primary" htmlType="submit">
          登录
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Login;
